<template>
  <div class="about">
    <div class="line">
      <label> 用户名：</label>
      <input type="text" placeholder="请输入用户名" v-model="user" />
    </div>
    <div class="line">
      <label>密码：</label>
      <input type="password" placeholder="请输入密码" v-model="pwd" />
    </div>
    <my-button @click="register" :isLoding="success">注册</my-button>
    <my-button @click="$router.push('/login')">去登录</my-button>
  </div>
</template>
<script>
import myButton from "../components/myButton.vue";
export default {
  components: { myButton },
  data() {
    return {
      user: "",
      pwd: "",
      success: false,
      userList: [], // 注册的用户列表
    };
  },
  created() {
    this.userList = JSON.parse(localStorage.getItem("userList")) || [];
  },
  methods: {
    register() {
      // 去注册
      let re = /^[\dA-Za-z]*$/;
      if (re.test(this.user) && this.pwd) {
        this.success = true;
        setTimeout(() => {
          this.success = false;
          let bool = this.userList.some((item) => item.user == this.user);
          if (bool) {
            alert("用户已注册！");
            return;
          }
          this.userList.push({
            user: this.user,
            pwd: this.pwd,
          });
          localStorage.setItem("userList", JSON.stringify(this.userList));
          this.$router.push("/login");
        }, 2000);
      } else {
        alert("用户名或者密码输入不正确");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.about {
  padding: 20px;
  box-sizing: border-box;
}
.line {
  margin-bottom: 10px;
}
</style>
